<template>



  <header class="navbar navbar-expand-sm navbar-light d-print-none fixed-top">
    <div class="container-xl">
      <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
        <a href="/">
          <img src="@/assets/images/tasksaas.png" width="110" height="32" alt="TaskSaas" class="navbar-brand-image"/>
        </a>
      </h1>

      <div class="dropdown dropdown-toggle" data-bs-toggle="dropdown" v-show="token">
        <div class="navbar-nav flex-row order-md-last">
          <div class="nav-item">
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">
                Action
                <span class="badge bg-primary ms-auto">12</span>
              </a>
              <a class="dropdown-item" href="#">
                Another action
                <span class="badge bg-green ms-auto"></span>
              </a>
              <a class="dropdown-item" href="#" @click="doLogout">
                Logout
                <span class="badge ms-auto"></span>
              </a>
            </div>
            <a href="#" class="nav-link d-flex lh-1 text-reset p-0">
              <span class="avatar avatar-sm" style="background-image: url(...)"></span>
              <div class="d-none d-xl-block ps-2">
                <div>{{ username }}</div>
                <div class="mt-1 small text-secondary">System Admin</div>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div v-show="!token">
        <a-space wrap>
<!--        <div class="navbar-nav flex-row order-md-last">-->
          <div class="nav-item">
            <a href="/signIn">登录</a>
          </div>
<!--        </div>-->
<!--        <div class="navbar-nav flex-row order-md-last" style="padding-left:20px">-->
          <div class="nav-item">

            <a href="/signUp">注册</a>
          </div>
<!--        </div>-->
        </a-space>
      </div>
    </div>
  </header>


</template>

<script>

import {createRouter as $router} from "vue-router";
import {loginPass} from '@/api/auth.js'
import {mapActions, mapGetters} from "vuex";
import {setTokenExpired, setUserName} from "@/utils/auth.js";

export default {
  name: "Navbar2",
  // props:
  //     {
  //       selectedKeys:{
  //         type: Array,
  //         default:null
  //       }
  //     },
  data() {
    return {
      selectedKeys: []
    }
  },
  watch: {
    selectedKeys: function (val) {
      console.log('watch selectedKeys', val)
      if (val.length > 0) {
        this.selectedKeys = val
        this.navigationChange(val[0])
      }
    }
  },
  computed: {
    count() {
      return this.$store.state.count
    },
    pv() {
      return this.$store.state.pv
    },
    store() {
      return this.$store
    },

    ...mapGetters([
      'navigationCode',
      'token',
      'username',
    ])
  },
  methods: {
    goLogin() {
      $router.push('/login')
    },
    goRegister() {
    },
    goIndex() {
      $router.push('/')
    },
    doLogout() {
      console.log('doLogout……')
      this.Logout()
    },
    ...mapActions([
      'navigationChange',
      'Register',
      'increment',
      'login_count',
      'Logout',
      'login'
    ])
  },
  created() {
    this.selectedKeys = [this.navigationCode]
  },
  mounted() {
//
  },

}

async function doLogin(data) {
  console.log('doLogin……')
}


</script>

<style scoped>
.site-layout-content {
  min-height: 880px;
  padding: 24px;
  background: #fff;
}

.logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

[data-theme='dark'] .site-layout-content {
  background: #141414;
}

div.dropdown.dropdown-toggle::after {
  display: none;
}
/*.navbar-default {*/
/*  border-radius: 4px;*/
/*}*/
</style>
